<template>
	<div id="tv_chart_container" style="width: 100%;margin:auto;z-index: 999;"></div>
</template>

<script>
    let _this;
	export default {
		name: 'KLine',
		data() {
			return {
				marketId: this.$route.query.marketId,
			} 
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			var first = true;
			var $this = this;
			//			var m_id = this.getQueryValue("m_id");
			var m = "5," + this.marketId;
			//所有文本颜色
			var textColor = '#61688a';
			var widget = window.tvWidget = new TradingView.widget({
				// debug: true, // uncomment this line to see Library errors and warnings in the console
				fullscreen: true,
				symbol: m,
				interval: '1',
				container_id: "tv_chart_container",
				//	BEWARE: no trailing slash is expected in feed URL
				datafeed: new Datafeeds.UDFCompatibleDatafeed(process.env.API_HOST + "indexs", 30000),
				library_path: "./static/charting_library/",
				locale: "zh",
				// 时区
				timezone: 'Asia/Hong_Kong',
				disabled_features: [
					"timeframes_toolbar",
					"header_screenshot",
					"header_symbol_search",
					"header_saveload",
					"save_chart_properties_to_local_storage",
					"volume_force_overlay",
					"use_localstorage_for_settings",
					"header_chart_type",
					"header_compare",
					"display_market_status",
					"header_resolutions",
					"header_undo_redo",
					"header_indicators",
					"header_settings",
					//隐藏全屏按钮
					"header_fullscreen_button",
				],
				enabled_features: [
					"move_logo_to_main_pane",
					"study_templates"
				],
				charts_storage_url: 'http://saveload.tradingview.com',
				charts_storage_api_version: "1.1",
				client_id: 'tradingview.com',
				user_id: 'public_user_id',
				theme: $this.getParameterByName('theme'),
				overrides: {
					//窗格背景
						"paneProperties.background": "#181B2A",
						//纵向网格线颜色
						"paneProperties.vertGridProperties.color": "#1f2943",
						//横向网格线颜色
						"paneProperties.horzGridProperties.color": "#1f2943",
						//标记水印透明度
						"symbolWatermarkProperties.transparency": 0,
						//刻度属性文本颜色
						"scalesProperties.textColor": "#61688a",
						// 设置坐标轴字体大小
						//'scalesProperties.fontSize': 16, 
						//隐藏左上角标题
						'paneProperties.legendProperties.showLegend': false,
						'left_toolbar': false,
						//销量面板尺寸，支持的值: large, medium, small, tiny
						"volumePaneSize": "medium"

				}
			});
			widget.onChartReady(function() {
				//1min按钮
				widget.createButton()
					.attr('title', "1min")
					.addClass("1min")
					.text("1min")
					.on('click', function(e) {
						widget.setSymbol("1," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution('1');
					});

				//5min按钮
				widget.createButton()
					.attr('title', "5min")
					.addClass("5min")
					.text("5min")
					.css("color", "#fff")
					.on('click', function(e) {
						widget.setSymbol("5," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution("5");
					});

				//15min
				widget.createButton()
					.attr('title', "15min")
					.addClass("15min")
					.text("15min")
					.on('click', function(e) {
						widget.setSymbol("15," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution("15");
					});

				//30min
				widget.createButton()
					.attr('title', "30min")
					.addClass("30min")
					.text("30min")
					.on('click', function(e) {
						widget.setSymbol("30," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution("30");
					});

				//1hour
				widget.createButton()
					.attr('title', "1hour")
					.addClass("1hour")
					.text("1hour")
					.on('click', function(e) {
						widget.setSymbol("60," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution("60");
					});

				//1day
				widget.createButton()
					.attr('title', "1day")
					.addClass("1day")
					.text("day")
					.on('click', function(e) {
						widget.setSymbol("1D," + _this.marketId);
						$(this).parents(".wrap-3tiHesTk-").children('.group-wWM3zP_M-').find(".apply-common-tooltip").removeAttr("style");
						$(this).css("color", "#fff");
						widget.chart().setResolution("1D");
					});

				//图标属性
				widget.createButton()
					.attr('title', "图标属性")
					.addClass("resize")
					.on('click', function(e) {
						var docElm = document.getElementById("tv_chart_container");
						var resize = function() {
							var width = document.documentElement.clientWidth,
								height = document.documentElement.clientHeight,
								style = "";
							if(!first) { // 横屏
								parent.$(".toTopOrBottom").show()
								first = true;
								parent.$('.weui-flex').show();
								parent.$(".head").show();
								parent.$(".overlay").css('top', '46px').css('bottom', '102px');
								parent.$(".btn").show();
								$("#tv_chart_container iframe").height(height).width(width);
								style += "width:" + width + "px;"; // 注意旋转后的宽高切换
								style += "height:" + height + "px;";
								style += "-webkit-transform: rotate(0); transform: rotate(0);";
								style += "-webkit-transform-origin: 0 0;";
								style += "transform-origin: 0 0;";
								$('.klineReturn').parent().css('right', '5px').css('top', '0px').css('padding-left', '20px').css('padding-top', '0px');
							} else { // 竖屏
								parent.$(".toTopOrBottom").hide()
								first = false;
								parent.$('.weui-flex').hide();
								parent.$(".head").hide();
								parent.$(".overlay").css('top', '0').css('bottom', '56px');
								parent.$(".btn").hide();
								$("#tv_chart_container iframe").width(height);
								style += "width:" + width + "px;";
								style += "height:" + height + "px;";
								style += "position:fixed;top:0;left:0;z-index:999;";
								style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
								// 注意旋转中点的处理
								style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
								style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
								$('.klineReturn').parent().css('bottom', '5px').css('right', '0px').css('padding-left', '0px').css('padding-top', '20px').css('top', 'none');
								document.getElementsByTagName('iframe')[0].style.cssText = "height:" + width + "px!important;display: block;width: " + height + "px;";
							}
							docElm.style.cssText = style;
						}
						window.onresize = resize;
						resize();
					})
					// .append('<img src="./images/full_screen@2x.png" width="20" align="center"/>');
				//隐藏所有标记
				widget.chart().executeActionById("hideAllMarks");
			});
		},
		methods: {
			//			getQueryValue(name) {
			//				// 创建正则表达式，这个表达式匹配以name开头或者&name开头，以&结尾或者就是name结尾
			//				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			//				// 解码url
			//				var decodedUrl = decodeURI(window.location.search);
			//				// 匹配表达式，返回一个group数组
			//				var r = decodedUrl.substr(1).match(reg);
			//				// 数组下标2的元素就是所要截取的结果
			//				if(r != null) return unescape(r[2]);
			//				return null;
			//			},
			getParameterByName() {
				name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
				var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
					results = regex.exec(location.search);
				return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
			}
		},
		// destroyed() {
		// 	widget.remove()
		// },
	}
</script>
<style>
	iframe {
		height: 370px!important
	}
	
	.toolbar-2n2cwgp5- {
		padding: 0 !important;
		background: #f00 !important;
	}
	
	.layout__area--center {
		/* top: 24px !important; */
	}
</style>